<template>
  <!--此界面有我的订单点击返修按钮进入，请勿修改-->
  <div class="new-repair">
    <div class="nr-main">
      <div class="nrm-common-two">
        <span></span>
        <span>订单信息</span>
      </div>
      <ul class="nrm-one">
        <li>
          <p>
            <span>订单编号</span>
            <span>{{ tableData.orderSn }}</span>
          </p>
          <p>
            <span>订单类型</span>
            <span>个定下单</span>
          </p>
        </li>
        <li>
          <p>
            <span>订单状态</span>
            <span v-if="tableData.status=='1'">已支付</span>
            <span v-if="tableData.status=='2'">已提交</span>
            <span v-if="tableData.status=='3'">已结单</span>
            <span v-if="tableData.status=='4'">等待面料</span>
            <span v-if="tableData.status=='5'">剪裁</span>
            <span v-if="tableData.status=='6'">缝制</span>
            <span v-if="tableData.status=='7'">发货</span>
            <span v-if="tableData.status=='8'">订单完成</span>
            <span v-if="tableData.status=='9'">售后</span>
            <span v-if="tableData.status=='10'">驳回</span>
            <span v-if="tableData.status=='11'">未支付</span>
          </p>
          <!--          <p>-->
          <!--            <span>客户姓名</span>-->
          <!--            <span>{{ tableData.customerName }}</span>-->
          <!--          </p>-->

          <p>
            <span>下单员工</span>
            <span>{{ tableData.empName }}</span>
          </p>

        </li>
        <li>
          <p>
            <span>创建时间</span>
            <span>{{ tableData.createTime }}</span>
          </p>

          <p>
            <span>下单门店</span>
            <span>{{ tableData.storeName }}</span>
          </p>
          <!--          <P>-->
          <!--            <span>客户性别 </span>-->
          <!--            <span>{{ tableData.customerSex }}</span>-->
          <!--          </P>-->
        </li>
      </ul>

      <div class="nrm-common-two">
        <span></span>
        <span>基本信息</span>
      </div>
      <ul class="nrm-one">
        <li>
          <p>
            <span>顾客编号</span>
            <span>{{ tableData.customerCode }}</span>
          </p>
          <p>
            <span>顾客性别</span>
            <span>{{ tableData.customerSex }}</span>
          </p>
          <p>
            <span>顾客姓名</span>
            <span>{{ tableData.customerName }}</span>
          </p>
        </li>
        <li>
          <!--          <p>
                      <span>面料来源</span>
                      <span>{{ tableData.fabricSource }}</span>
                    </p>-->
          <p>
            <span>业务来源</span>
            <span>{{ tableData.businessSource }}</span>
          </p>
          <p>
            <span>包装方式</span>
            <span>{{ tableData.packageType }}</span>
          </p>
        </li>
        <li>
          <p>
            <span>快递方式</span>
            <span>{{ tableData.courierName }}</span>
          </p>
          <P>
            <span>地址</span>
            <span>{{ tableData.address }}</span>
          </P>
        </li>
      </ul>

      <div class="nrm-common-two">
        <span></span>
        <span>返修</span>
      </div>
      <ul class="nrm-five">

        <label>
          选择产品：
          <el-select placeholder="请选择需要售后的产品" style="width:250px" v-model="selectPro"
                     @change="changeSize(selectPro),productID = selectPro">
            <el-option :label="item.productName" :value="item.id"
                       v-for="(item,key) in tableData.productInfoList"></el-option>
          </el-select>
        </label>

        <!--产品列表-->
        <!--                <el-button
                            style="background-color: #4c4c4c"
                            v-for="(item,key) in tableData.productInfoList"
                            :key="item.id"
                            type="primary"
                            @click="changeSize(item.id),productID = item.id"
                        >{{ item.productName }}
                        </el-button>-->
      </ul>
      <!--这里展示的是每个产品的尺寸表-->
      <!--@blur="updateSize(list.id,list.bodysizeValue,list.bodySizename)"-->
      <div class="nrm-six">
        <div v-for="(list,key) in sizeData" style="margin: 10px">
          <div class="nrmsi-label">
            {{ list.bodySizename }}
          </div>

          <el-input
              :controls="false"
              style="width: 200px"
              v-model="list.bodysizeValue"
              :placeholder="'输入范围：'+list.min+'~'+list.max"
              @blur="updateSize(list.id,list.bodysizeValue,list.bodySizename)"
              class="nrms-ipt">
          </el-input>

          <div class="nrmsi-right">
            {{ list.unit }}
          </div>
        </div>
      </div>

      <!--      <div class="tabss-content">-->
      <!--        <div>-->
      <!--          <div class="inputs1" v-for="(item,key) in sizeData" :key="item.id">-->
      <!--            <p>{{ item.bodySizename }}</p>-->
      <!--            <a-input-number style="width: 80px" :max="item.max" :min="item.min" type="text"-->
      <!--                            v-model="item.bodysizeValue"></a-input-number>-->
      <!--            <span>cm</span>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->

      <div class="nrm-common-two">
        <span></span>
        <span>售后原因</span>
      </div>
      <el-input
          style="width:530px;margin-top:10px;margin-bottom: 10px;"
          size="40%"
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          v-model="textarea">
      </el-input>
      <!--上传图片-->
      <el-upload
          style="margin-top: 20px;"
          action="https://api.nbyid.cn/mlcc/user/interface/uploadImage"
          list-type="picture-card"
          :limit="1"
          :on-exceed="handleExceed"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          ref="upload">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>

      <div class="nrm-common-two">
        <span></span>
        <span>返修金额</span>
      </div>
      <div class="nrm-there">
        <p>返修金额</p>
        <p>{{ afterPrice }}元</p>
      </div>

      <!--<div class="nrm-four">提交订单</div>-->
      <div style="margin-top: 40px;">
        <el-button type="success" @click="updateOrder">提交订单</el-button>
        <el-button type="primary" @click="selectSingleFanxiuPriceFunc">计算价格</el-button>
      </div>
    </div>

    <!--支付界面弹窗-->
    <el-drawer
        class="el-drawer__body"
        title="详细"
        size="40%"
        :with-header="false"
        :visible.sync="drawer"
        :direction="direction">
      <div style="height: 30px;line-height: 30px;left: 10px;padding-left: 26px;margin-top: 16px;">
        <i class="el-icon-s-order" style="font-size: 16px;">订单结算</i>
      </div>

      <div style="margin-top: 12px;"><span
          style="color: #ADADAD;font-size: 14px;margin-left: 26px;">支付金额（元）</span></div>
      <div style="margin-top: 12px;"><span
          style="color: #333333;font-size: 18px;margin-left: 26px;">{{ afterPrice }}</span>
      </div>
      <div style="margin-top: 36px;"><span style="color: #333333;font-size: 14px;margin-left: 26px;">支付方式</span>
      </div>


      <div style="margin-top: 18px;padding-left: 26px;">
        <!--                <el-radio v-model="radio1" label="1" border>支付宝支付</el-radio>
                        <el-radio v-model="radio1" label="2" border>微信支付</el-radio>-->
        <el-radio v-model="radio1" label="3" border>余额支付</el-radio>
      </div>

      <div style="margin-top: 36px;"><span style="color: #333333;font-size: 14px;margin-left: 26px;">当前余额</span>
      </div>
      <div style="margin-top: 12px;"><span
          style="color: #333333;font-size: 18px;margin-left: 26px;">月结额度剩余：{{ userDetail.remainingLimit }}元</span>
      </div>
      <div style="margin-top: 12px;"><span
          style="color: #333333;font-size: 18px;margin-left: 26px;">账户余额：{{ userDetail.accountBalance }}元</span>
      </div>
      <div style="margin-top: 12px;"><span
          style="color: #333333;font-size: 18px;margin-left: 26px;">抵扣额度：{{ userDetail.deductionLimit }}元</span>
      </div>

      <el-button type="primary" @click="buynow"
                 style="background: #303030;margin-left: 26px;margin-top: 36px;"><span
          style="font-size: 14px;color: #FFE56D">立即支付</span></el-button>
    </el-drawer>
  </div>
</template>

<script>
import {getAction} from "../../api/manage";

export default {
  created() {
    this.getData()
    this.createSingleAfterOrderFunc()
    this.getuserDetail()
  },
  data() {
    return {
      selectPro: {}, // 选中的产品
      drawer: false, // 支付弹窗是否显示
      afterPrice: '', // 售后价格
      radio1: '', // 支付方式
      autohor_token: localStorage.getItem("token"), //token
      afterCode: '', // 售后订单编号
      dialogImageUrl: '',//上传的图片路径
      textarea: '',
      productID: '', // 选中的产品ID
      userDetail: {}, // 当前账户详情
      url: {
        list: '/fabricAndOther/getDingleOrderDetail',
        userDetail: '/fabricAndOther/getUserDetail', // 查余额
        updateSize: '/Order/updateProductSize',
        updateSingleOrder: '/Order/updateSingleOrder', // 提交订单
        listProductBodySize: '/Order/listProductBodySize', // 获取可以返修的尺寸
        saveFanxiuSize: '/Order/saveFanxiuSize', // 修改返修尺寸
        selectSingleFanxiuPrice: '/Order/selectSingleFanxiuPrice', // 返修计算价格
        /*saveSinglrOrderAfter: '/Order/saveSinglrOrderAfter', // 保存售后信息*/
        createSingleAfterOrder: '/Order/createSingleAfterOrder' // 一进入这个页面就创建一条售后订单记录
      },
      iptValOne: "",
      current: 1,
      oneObj: {
        input1: "",
      },
      // SingleOrderDetailData
      tableData: {},
      sizeData: []
    };
  },
  methods: {

    /**
     * 立即支付
     */
    buynow() {
      if (this.radio1 == '') {
        // this.$message.warning("请选择支付方式!")
        this.$notify.warning({
          title: "提示",
          message: '请选择支付方式',
          duration: 1500,
        });
        /*this.applymethod = '0';*/
        return;
      } else if (this.radio1 == '1') {
        this.$message.warning("正在开发中")
        return;
      } else if (this.radio1 == '2') {
        /*this.applymethod = '2';*/
        this.$message.warning("正在开发中")
        return;
      } else if (this.radio1 == '3') {
        getAction(domain.publicUrl + this.url.updateSingleOrder, {
          'token': this.autohor_token,
          'orderSn': this.tableData.orderSn,
          'reason': this.textarea,
          'imgURL': this.dialogImageUrl,
          'money': this.afterPrice,
          'afterCode': this.afterCode,
          'pid': this.selectPro
        }).then(res => {
          if (res.data.code == '0') {
            // this.$message.success("提交成功！")
            this.$notify.success({
              title: "提示",
              message: "支付成功",
              duration: 1500,
            });
            this.$router.push("/my-order")
          } else {
            // this.$message.error("提交失败！")
            this.$notify.warning({
              title: "提示",
              message: "提交失败",
              duration: 1500,
            });
          }
        })
      }
    },

    // 查询用户详情
    getuserDetail() {
      getAction(domain.publicUrl + this.url.userDetail, {
        'token': this.autohor_token
      }).then(res => {
        if (res.data.code == '0') {
          this.userDetail = res.data.data
        }
      })
    },

    /**
     * 计算本次返修价格
     */
    selectSingleFanxiuPriceFunc() {
      getAction(domain.publicUrl + this.url.selectSingleFanxiuPrice, {
        'afterCode': this.afterCode,
        'orderSn': this.$route.query.sn,
        'pid': this.selectPro
      }).then(res => {
        if (res.data.code == '0') {
          this.afterPrice = res.data.price
        }
      })
    },

    /**
     * 一进入页面就创建一条售后订单记录
     */
    createSingleAfterOrderFunc() {
      getAction(domain.publicUrl + this.url.createSingleAfterOrder, {
        'orderSn': this.$route.query.sn,
        'token': this.autohor_token
      }).then(res => {
        if (res.data.code == '0') {
          this.afterCode = res.data.data
        }
      })
    },

    /*/!**
     * 真正的保存售后的方法
     *!/
    saveAfterOrderFunc() {
        let param = new FormData()
        param.append('orderSn', this.$route.query.sn) // 个定订单编号
        param.append('size', this.sizeData) // 尺寸数据
        param.append('remark', this.textarea) // 售后原因
        param.append('url', this.dialogImageUrl) // 售后图片
        postAction(domain.publicUrl + this.url.saveSinglrOrderAfter, param).then(res => {
            if (res.data.code == '0') {
                this.$message.success("提交成功")
                this.$router.go(-1)
            } else {
                this.$message.error("提交失败")
            }
        })
    },*/

    // loading data
    getData() {
      const loading = this.$loading({
        lock: true,
        text: '数据拼命加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getAction(domain.publicUrl + this.url.list, {
        'token': this.autohor_token,
        'orderSn': this.$route.query.sn
      }).then(res => {
        loading.close();
        if (res.data.code == '0') {
          this.tableData = res.data.data
        }
      })
      // console.log(this.$route.query.sn)
    },
    // 选中对应的产品，显示尺寸数据
    changeSize(productId) {
      getAction(domain.publicUrl + this.url.listProductBodySize, {
        "token": this.autohor_token,
        "priductID": productId
      }).then(res => {
        if (res.data.code == '0') {
          this.sizeData = res.data.data
        }
      })
      /*if (this.tableData != null && this.tableData.productInfoList != null) {
          for (var i = 0; i < this.tableData.productInfoList.length; i++) {
              if (productId == this.tableData.productInfoList[i].id) {
                  this.sizeData = this.tableData.productInfoList[i].productBodySizeList
              }
          }
      }*/
    },
    // 更新产品尺寸
    updateSize(sizeID, sizeValue, sizeTitle) {
      if (sizeValue == null || sizeValue == '')
        return
      getAction(domain.publicUrl + this.url.saveFanxiuSize, {
        'token': this.autohor_token,
        'productID': this.productID,
        'sizeID': sizeID,
        'sizeValue': sizeValue,
        'sizeTitle': sizeTitle,
        'orderSn': this.$route.query.sn,
        'afterCode': this.afterCode
      }).then(res => {
        if (res.data.code == '0') {
          // this.$message.success("修改成功！")
        } else {
          this.$message.error("修改失败！")
        }
      })

      /*getAction(domain.publicUrl + this.url.updateSize, {
          'token': this.autohor_token,
          'productID': this.productID,
          'sizeID': sizeID,
          'sizeValue': sizeValue
      }).then(res => {
          if (res.data.code == '0') {
              // this.$message.success("修改成功！")
              return
          } else {
              this.$message.error("修改失败！")
          }
      })*/
    },
    // 提交
    updateOrder() {
      this.drawer = true
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    //上传图片成功函数
    handleSuccess(response, file, fileList) {
      var result = response;
      this.dialogImageUrl = result.data;
      // this.dialogImageUrl = result.data;
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      this.$message.warning("上传文件超出限制");
    }
  }
};
</script>

<style lang="scss" scoped>
.new-repair {
  box-sizing: border-box;
  padding: 30px 90px;

  .nrm-common-one {
    display: flex;
    align-items: center;

    .nrmco-input {
      width: 290px;
    }

    .nrmco-btn {
      box-sizing: border-box;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #303030;
      border-radius: 3px;
      margin: 0 10px;
      font-size: 16px;
      font-weight: 500;
      color: #ffe56d;
      cursor: pointer;
    }
  }

  .nrm-common-two {
    display: flex;
    align-items: center;
    margin-top: 25px;

    span:nth-child(1) {
      width: 4px;
      height: 28px;
      background: #4a4a4a;
      margin-right: 15px;
    }

    span:nth-child(2) {
      font-size: 16px;
      font-weight: 600;
      color: #4e4e4e;
    }
  }

  .nr-main {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 40px 30px;

    .nrm-one {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      box-sizing: border-box;
      padding: 0 20px;

      li {
        p {
          margin-bottom: 20px;

          span {
            font-size: 16px;
            color: #4e4e4e;
          }

          span:nth-child(1) {
            margin-right: 20px;
            font-weight: 200;
          }

          span:nth-child(2) {
            font-weight: 500;
          }
        }
      }
    }

    .nrm-two {
      margin-top: 20px;
    }

    .nrm-there {
      display: flex;
      align-items: center;
      margin-top: 30px;

      p:nth-child(1) {
        width: 90px;
        height: 40px;
        background: #f2f2f2;
        font-size: 14px;
        font-weight: 400;
        color: #555555;
        line-height: 40px;
        text-align: center;
        margin-right: 32px;
      }

      p:nth-child(2) {
        font-size: 16px;
        font-weight: bold;
        color: #393939;
      }
    }

    .nrm-four {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #24c04f;
      border-radius: 3px;
      color: #fff;
      font-size: 14px;
      margin-top: 40px;
      cursor: pointer;
    }

    .nrm-five {
      display: flex;
      margin-top: 20px;

      li {
        width: 90px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #ededed;
        border-radius: 3px;
        font-size: 14px;
        color: #a1a1a1;
        margin-right: 12px;
        cursor: pointer;
      }

      .active {
        background: #303030;
        color: #ffe56d;
      }
    }

    .nrm-six {
      display: flex;
      flex-wrap: wrap;

      .nrms-ipt {
        width: 200px;
        box-sizing: border-box;
        padding-left: 55px;
        margin-top: 20px;
        margin-right: 20px;
      }

      .nrmsi-label {
        display: inline-block;
        text-align: center;
        line-height: 40px;
        width: 85px;
        height: 40px;
        background: #2d2d2d;
        border-radius: 3px;
        color: #ffec70;
        position: relative;
        left: -5px;
      }

      .nrmsi-right {
        line-height: 40px;
        display: inline-block;
      }
    }
  }
}

.tabss-content {
  display: flex;
}

.inputs1 {
  width: 217px;
  height: 42px;
  display: flex;
  align-items: center;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
  margin-right: 20px;

  p {
    padding: 0 5px;
    color: #fdf538;
    background-color: #575757;
    font-size: 15px;
    min-width: 58px;
    text-align: center;
    line-height: 42px;
    border-radius: 3px;
    margin-bottom: 0px;
  }

  input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding-left: 10px;
  }

  span {
    color: #333;
    font-size: 13px;
    padding-right: 10px;
  }
}
</style>
